let main = document.querySelector('#main')


let _c = id => document.createElement(id)
let arr1 = [];

/* 请求点击菜单数据 */
ajax({
    url: 'http://chst.vip:1234/api/getcategorytitle'
}).then(res => {
    res = res.result



    main.innerHTML += create(res)
    let menus = document.querySelectorAll('#main>li>.menu')
    let texts = document.querySelectorAll('#main>li>.text')

    let isYes = true;
    for (let i = 0; i < texts.length; i++) {

        menus[i].onclick = function() {

            texts.forEach(function(item) {
                item.style.height = 0;
                item.style.overflow = 'hidden'
            })
            
            if (isYes) {
                let n = Math.ceil(arr1[i] / 4)
                console.log(n);
                this.nextElementSibling.style.height = n + 'rem';
                isYes = false
            } else {
                this.nextElementSibling.style.height = 0;
                isYes = true
            }

        }
    }
    return res
}).then(res => {
    for (let i = 0; i < res.length; i++) {


        ajax({
            url: "http://chst.vip:1234/api/getcategory?titleid=" + res[i].titleId
        }).then(data => {

            data = data.result
            let div = _c('div')
            console.log(data);
            arr1.push(data.length)
            div.className = 'texts';
            /* 通过数据创建商品内容 */
            for (let j = 0; j < data.length; j++) {
                let div2 = _c('div')
                let a = _c('a')
                a.href = 'bijia.html?categoryid=' + data[j].categoryId
                a.className = 'hrefs'
                a.innerHTML = data[j].category //赋值
                div2.appendChild(a)
                div.appendChild(div2)
            }
            let text = document.querySelectorAll('.text')
            text[i].appendChild(div)

        })
    }

})



/* 渲染点击菜单函数 */
function create(arr) {
    let html = ''
    arr.forEach(item => {
        html += `<li>
          <div class="menu">
              <span class="left">${item.title}</span>
              <span class="iconfont icon-xiajiantou" style="padding-right: .3rem;"></span>
          </div>
          <div class="text"></div>
      </li>`
    });
    return html

}